-
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta
			name="viewport"
			content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover" />

		<link rel="stylesheet" href="./css/iconfont.css" />
		<link rel="stylesheet" href="./css/style.css" />
		<link rel="stylesheet" href="./layui/css/layui.css" />
		<script src="./js/axios.min.js"></script>
		<script src="./js/jquery.js"></script>
		<script src="./layui/layui.js"></script>
		<title>日照方舱远程控制系统</title>
	</head>

	<body>
		<div class="home">
			<div class="banner">
				<div class="title">日照方舱远程控制系统</div>
			</div>
			<div class="container">
				<div class="fbtn-tab">
					<div class="tab-item">方舱控制</div>
					<div class="tab-item">卷闸控制</div>
					<div class="tab-item">灯光控制</div>
				</div>
				<div class="list">
					<div class="list-item">
						<div class="fbtn" id="next">前进</div>
						<div class="fbtn" id="prev">后退</div>
						<div class="fbtn" id="description">控制说明</div>
					</div>
					<div class="list-item">
						<div class="fbtn no-event" id="up">升起</div>
						<div class="fbtn no-event" id="down">放下</div>
						<div class="fbtn" id="uploadStatus">状态查看</div>
					</div>
					<div class="list-item">
						<div class="fbtn" id="open">开启</div>
						<div class="fbtn" id="close">关闭</div>
						<div class="fbtn" id="controlTime">定时控制</div>
					</div>
				</div>
			</div>
		</div>
		<script id="timeDialog" type="text/html">
			<div class="time-form">
				<h4>方舱控制</h4>
				<div class="time-form-item">
					<div class="form-title">前移时间:</div>
					<input type="time" name="startTime" id="fcStart" />
				</div>
				<div class="time-form-item">
					<div class="form-title">后退时间:</div>
					<input type="time" name="endTime" id="fcEnd" />
				</div>
				<h4>灯光控制</h4>
				<div class="time-form-item">
					<div class="form-title">开启时间:</div>
					<input type="time" name="startTime" id="dgStart" />
				</div>
				<div class="time-form-item">
					<div class="form-title">关闭时间:</div>
					<input type="time" name="endTime" id="dgEnd" />
				</div>
				<div class="text-center">
					<button onclick="sure()">确定</button>
					<button onclick="cancel()">取消</button>
				</div>
			</div>
		</script>
	</body>
	<script>
		const instance = axios.create({
			baseURL: 'http://39.103.143.152/index/',
			timeout: 0,
		});
		function getInfo() {
			instance
				.get('/getStationInfo')
				.then(result => {
					console.log('🚀 ~ file: rizhao.html:84 ~ result:', result);
					if (result.data.code == 200) {
						const obj = result.data.data[0];
						// 方舱状态 0关 1开
						if (obj.switch_status === 0) {
							$('#prev').removeClass('disable');
							$('#next').addClass('disable');
						} else {
							$('#next').removeClass('disable');
							$('#prev').addClass('disable');
						}

						// 卷闸状态
						if (obj.roller_status === 0) {
							$('#down').removeClass('disable');
							$('#up').addClass('disable');
						} else {
							$('#up').removeClass('disable');
							$('#down').addClass('disable');
						}

						// 灯光状态
						if (obj.clamp_status === 0) {
							$('#close').removeClass('disable');
							$('#open').addClass('disable');
						} else {
							$('#open').removeClass('disable');
							$('#close').addClass('disable');
						}
					}
				})
				.catch(err => {});
		}

		$('#controlTime').click(function () {
			layui.use('layer', function () {
				const layer = layui.layer;
				layer.open({
					type: 1,
					shade: false,
					content: $('#timeDialog').html(),
				});
			});
		});
		$('#description').click(function () {
			layui.use('layer', function () {
				const layer = layui.layer;
				layer.open({
					title: '控制说明',
					content: '这是控制说明',
					btn: ['关闭'],
				});
			});
		});
		$('#uploadStatus').click(function () {
			getInfo();
		});
		$('#next').click(function () {
			updateBtnStatus({ switch_status: 1, id: 1 });
		});
		$('#prev').click(function () {
			updateBtnStatus({ switch_status: 2, id: 1 });
		});
		$('#open').click(function () {
			updateBtnStatus({ clamp_status: 1, id: 1 });
		});
		$('#close').click(function () {
			updateBtnStatus({ clamp_status: 0, id: 1 });
		});
		function updateBtnStatus(params = {}) {
			instance
				.post('/controlSwitch', params)
				.then(result => {
					if (result.data.code !== 200) {
						layui.use('layer', function () {
							const layer = layui.layer;
							layer.msg(result.data.message, { icon: 0 });
						});
					}
				})
				.catch(e => {
					console.error(e);
					layui.use('layer', function () {
						const layer = layui.layer;
						layer.msg('请求错误！', { icon: 0 });
					});
				});
		}

		function sure() {
			const fcStart = $('#fcStart').val();
			const fcEnd = $('#fcEnd').val();
			const dgStart = $('#dgStart').val();
			const dgEnd = $('#dgEnd').val();
			console.log('sure', fcStart, fcEnd, dgStart, dgEnd);
			layui.use('layer', function () {
				const layer = layui.layer;
				layer.closeAll();
			});
		}
		function cancel() {
			layui.use('layer', function () {
				const layer = layui.layer;
				layer.closeAll();
			});
		}
		$(document).ready(function () {
			getInfo();
		});
		setInterval(() => {
			getInfo();
		}, 60000);
	</script>
</html>
